<script setup></script>
<template>
  <el-container>
    <el-main>
      <div class="banner">
        <img src="@/assets/banner.jpg" alt="Banner Image" />
      </div>
      <el-space wrap>
        <el-card v-for="i in 20" :key="i" class="box-card" style="width: 250px">
          <template #header>
            <div class="card-header">
              <span>Card name</span>
              <el-button class="button" text>Operation button</el-button>
            </div>
          </template>
          <div v-for="o in 4" :key="o" class="text item">
            {{ 'List item ' + o }}
          </div>
        </el-card>
      </el-space></el-main
    >
  </el-container>
</template>
<style lang="scss" scoped>
.banner {
  justify-content: center;
  align-items: center;
  display: flex;
  margin-bottom: 20px;
}
</style>
